<template>
  <div class="panel-tab__content">
    <el-button size="small" @click="isDialog">
      反馈
    </el-button>
    <div class="element-property list-property">
      <el-table :data="fileTable" size="mini" max-height="240" border fit>
        <el-table-column align="center" prop="context" label="反馈内容"></el-table-column>
        <el-table-column align="center" prop="userName" label="反馈人" width="90px"></el-table-column>
        <el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="80px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row)"
            >查看
            </el-button>
            <el-button v-if="scope.row.status ==='0'" size="small" type="text"
                       @click="closeHandle(scope.row.opinionId,1)"
            >关闭
            </el-button>
            <!--            <el-button v-else size="small" type="text" @click="closeHandle(scope.row.opinionId,0)">开启</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增反馈" :visible.sync="correlationBaseOpen" append-to-body width="70%">
      <el-form ref="info" :model="info" label-width="120px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="反馈内容:" prop="context">
              <el-input type="textarea" v-model="info.context" clearable placeholder="请输入反馈内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片:">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :limit="3"
                :on-exceed="handleExceed"
                :before-remove="beforeRemove"
                :before-upload="handleBeforeUpload"
                :on-success="handleUploadSuccess"
                accept=".png,.jpg,.jpeg"
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-dialog :visible.sync="viewVisible" append-to-body width="70%">
      <el-card class="box-card" style="margin-bottom: 20px">
        <div slot="header" class="clearfix">
          <span style="font-weight: bolder">反馈</span>
        </div>
        <p><span style="font-size:15px;font-weight: bolder">反馈内容:</span><span
          style="margin-left: 10px;font-weight: bolder"
        >{{ infoJson.context }}</span></p>
        <p><span style="font-size: 15px;font-weight: bolder">反馈时间:</span><span
          style="margin-left: 10px;font-weight: bolder"
        >{{ infoJson.createTime }}</span></p>
        <p><span style="font-size: 15px;font-weight: bolder">反馈图片:</span></p>
        <el-image v-for="(item, index) in imageList"
                  style="width: 100px; height: 100px;margin-left: 10px;"
                  :key="index"
                  :src="item.url"
                  fit="fit"
                  :preview-src-list="[item.url]"
        ></el-image>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: bolder">回复</span>
        </div>
        <div v-for="(item, index) in commentList" :key="index">
          <div>
            <p style="font-weight: bolder"><span style="color: #00afff">{{ item.userName }}</span>
              <span style="margin: auto 10px;" v-if="item.replyUserName!==null">回复</span>
              <span style="color: green" v-if="item.replyUserName!==null">{{ item.replyUserName }}</span>:
              <span style="font-weight: bolder">{{ item.replyContent }}</span>
            </p>
            <p style="text-align: right">
              <span style="font-weight: bolder;margin-left: 50%"> 评论时间:{{ item.createTime }} </span>
              <el-button size="mini" type="text"
                         v-if="isClose"
                         style="color: #448EF7;margin-left: 30px;font-weight: bolder;font-size: 13px"
                         @click="commentHandle(item)"
              >
                回复
              </el-button>
            </p>
            <hr>
          </div>
        </div>
      </el-card>
      <el-form ref="commentForm" :model="comment" label-width="80px" style="margin-top: 20px;" v-if="isClose">
        <el-form-item label="回复:">
          <el-input type="textarea" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitComment">提交反馈</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="回复" :visible.sync="commentVisible" append-to-body width="70%">
      <el-form ref="commentForm" :model="replyJson" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="回复:">
          <el-input type="textarea" v-model="replyJson.content" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitComment1">提交反馈</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addOpinion, closeReply, listByOpinionId, listByProcessId, reply } from '@/api/lc/opinion'

export default {
  name: 'FeedBack',
  props: {
    businessObject: Object
  },
  watch: {
    businessObject: {
      immediate: true,
      handler: function(val) {
        if (val) {
          this.$nextTick(() => this.resetBaseInfo())
        }
      }
    }
  },
  data() {
    return {
      rules: {
        context: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      fileList: [],
      uploadUrl: process.env.VUE_APP_UPLOAD_URL,
      fileTable: [],
      correlationBaseOpen: false,
      info: {
        id: '',
        processId: this.$route.params.id,
        nodeKey: this.nodeKey,
        nodeName: this.nodeName,
        context: '',
        imageUrl: ''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      elementBaseInfo: {},
      nodeKey: '',
      nodeName: '',
      viewVisible: false,
      infoJson: {},
      comment: {
        content: ''
      },
      commentList: {},
      commentVisible: false,
      replyJson: {
        content: ''
      },
      replyJson1: {},
      isClose: true,
      imageList: []
    }
  },
  methods: {
    closeHandle(opinionId, status) {
      closeReply({ opinionId: opinionId, status: status }).then(res => {
        if (res.code === 200) {
          this.getList()
        }
      })
    },
    getList() {
      if (this.$route.params.id !== null && this.$route.params.id !== undefined) {
        listByProcessId({ 'processId': this.$route.params.id, 'nodeKey': this.nodeKey }).then(res => {
          this.fileTable = res.data
          console.log('获取反馈数据', res)
        })
      }
    },
    // 监听
    resetBaseInfo() {
      this.bpmnElement = window?.bpmnInstances?.bpmnElement
      if (this.bpmnElement !== undefined) {
        this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject))
        console.log(this.elementBaseInfo)
        this.nodeKey = this.elementBaseInfo.id
        this.nodeName = this.elementBaseInfo.name
        this.getList()
      }
    },
    isDialog() {
      this.correlationBaseOpen = true
      this.info = {
        id: '',
        processId: this.$route.params.id,
        nodeKey: this.nodeKey,
        nodeName: this.nodeName,
        context: '',
        imageUrl: ''
      }
      this.fileList = []
    },
    //上传文件移除事件
    beforeRemove(file, fileList) {
      for (let i = 0; i < this.fileList.length; i++) {
        console.log(file.uid, this.fileList[i].uid)
        if (file.uid === this.fileList[i].uid) {
          this.fileList.splice(i, 1)
        }
      }
      this.info.imageUrl = JSON.stringify(this.fileList)
    },
    // 文件操作改变时重新验证
    handleUploadSuccess(response, file) {
      if (response.code === 200) {
        this.fileList.push({
          'name': file.name,
          'url': response.data
        })
      }
      this.info.imageUrl = JSON.stringify(this.fileList)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //限制传文件个数
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    handleBeforeUpload(file) {
      // let size = file.size / 1024 / 1024
      // if (size > 3) {
      //   this.$myTools.showMessage('warning', '文件大小不得超过3M')
      //   return false
      // }
    },
    submitForm() {
      this.$refs['info'].validate(valid => {
        if (valid) {
          addOpinion(this.info).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess(res.msg)
              this.correlationBaseOpen = false
              this.getList()
            }
          })
        }
      })
    },
    cancel() {
      this.correlationBaseOpen = false
      this.info = {
        id: '',
        processId: this.$route.params.id,
        nodeKey: '',
        nodeName: '',
        context: '',
        imageUrl: ''
      }
    },
    // 查看
    handleView(data) {
      this.viewVisible = true
      this.infoJson = data
      console.log('data', data)
      this.isClose = data.status === '0'
      this.getCommentList()
      this.imageList = JSON.parse(this.infoJson.imageUrl)
    },
    // 回复
    submitComment() {
      if (this.comment.content === undefined || this.comment.content === null || this.comment.content === '') {
        this.$message.error('请填写反馈内容')
        return
      }
      reply({
        replyOpinionId: this.infoJson.opinionId,
        replyUserId: this.infoJson.userId,
        replyUserName: this.infoJson.userName,
        replyContent: this.comment.content,
        type: 0
      }).then(res => {
        if (res.code === 200) {
          this.comment = {
            content: ''
          }
          this.getCommentList()
          this.$message.success('操作成功')
        }
      })
    },
    // 获取评论列表
    getCommentList() {
      listByOpinionId({ opinionId: this.infoJson.opinionId }).then(res => {
        this.commentList = res.data
        console.log(res)
      })
    },
    // 回复弹窗
    commentHandle(data) {
      this.commentVisible = true
      this.replyJson1 = data
    },
    // 回复
    submitComment1() {
      if (this.replyJson.content === undefined || this.replyJson.content === null || this.replyJson.content === '') {
        this.$message.error('请填写反馈内容')
        return
      }
      reply({
        replyOpinionId: this.infoJson.opinionId,
        replyUserId: this.replyJson1.userId,
        replyUserName: this.replyJson1.userName,
        replyContent: this.replyJson.content,
        type: 1
      }).then(res => {
        if (res.code === 200) {
          this.commentVisible = false
          this.getCommentList()
          this.$message.success('操作成功')
        }
      })
    }
  }
}
</script>


<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
